<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component</title>
    <script src="vue.min.js"></script>
</head>
<body>

<article id="app7-4-2">
    <h1>{{msg}}</h1>
    <child-component v-if="show">
        <h2 slot="footer">底部信息</h2>
    </child-component>
    <component-b :books="books">
        <template slot="book" scope="props">
            <li>{{props.bookName}}</li>
        </template>
    </component-b>
</article>
<script>
    Vue.component('child-component',{
        template:`
        <div>
            <h2>{{msg}}</h2>
            <slot><p>如果没有我就出现</p></slot>
            <slot name="footer"></slot>
        </div>`,
        data(){
            return{msg:'i am children'}
        }
    })

    Vue.component('component-b',{
        template:`
        <ul>
            <slot name="book" v-for="book in books" :book-name="book.name"></slot>
        </ul>
        `,
        props:{
            books:{
                type:Array,
                default(){
                    return []
                }
            }
        }
    })

    var app = new Vue({
        el:'#app7-4-2',
        data:{
            show:true,
            msg:'i am father',
            books:[
                {name:'javascript'},
                {name:'html'},
                {name:'php-script'},
            ]
        }
    })
</script>


<article id="app7-3-3">
    <!--<h1>{{ message }}</h1>-->
    <!--<my-component></my-component>-->
</article>
<script>
    // var bus = new Vue()
    // Vue.component('my-component',{
    //     template:`<button @click="handleEvent">传递事件</button>`,
    //     methods:{
    //         handleEvent(){
    //             bus.$emit('on-message','come from my-component ...')
    //         }
    //     }
    // })
    // var app = new Vue({
    //     el:'#app7-3-3',
    //     data:{
    //         message:''
    //     },
    //     mounted(){
    //         bus.$on('on-message',msg=>{
    //             this.message = msg
    //         })
    //     }
    // })


    // Vue.component('my-component',{
    //     template:`<button @click="dispatch2">派发事件</button>`,
    //     methods:{
    //         dispatch2(){
    //             console.log(this)
    //             this.$invoke('on-message','come from inner component')
    //         }
    //     }
    // })
    // var app = new Vue({
    //     el:'#app7-3-3',
    //     data:{
    //         message:''
    //     },
    //     events:{
    //         ['on-message'](msg){
    //             this.message = msg
    //             console.log(msg)
    //         }
    //     }
    // })
</script>

<article id="app7-3">
    <!--<h1>总数:{{total}}</h1>-->
    <!--<my-component @increase="getTotal" @reduce="getTotal"></my-component>-->
    <!--<my-component v-model="total"></my-component>-->
</article>
<script>
    // Vue.component('my-component',{
    //     template:`
    //     <div>
    //         <button @click="handleIncrease">+1</button>
    //         <button @click="handleReduce">-1</button>
    //     </div>
    //     `,
    //     data(){
    //         return {counter:0}
    //     },
    //     methods:{
    //         handleIncrease(){
    //             this.counter++
    //             this.$emit('increase',this.counter)
    //             this.$emit('input',this.counter)
    //         },
    //         handleReduce(){
    //             this.counter--
    //             this.$emit('reduce',this.counter)
    //             this.$emit('input',this.counter)
    //         }
    //     }
    // })
    // var app = new Vue({
    //     el:'#app7-3',
    //     data:{
    //         total:0
    //     },
    //     methods:{
    //         getTotal(total){
    //             this.total = total
    //         }
    //     }
    // })
</script>

<article id="app7-2">
    <!--<my-component message="come from father"></my-component>-->
    <!--<hr>-->
    <!--<input type="text" v-model="parentMsg" placeholder="write here ...">-->
    <!--<my-component :message="parentMsg"></my-component>-->
</article>
<script>
    // Vue.component('my-component',{
    //     props:['message'],
    //     template:`<div>{{message}}</div>`
    // })
    // var app = new Vue({
    //     el:'#app7-2',
    //     data:{
    //         parentMsg:''
    //     }
    // })
</script>


<article id="app7-1">
    <!--<my-component></my-component>-->
    <!--<my-component></my-component>-->
    <!--<my-component></my-component>-->
    <!--<Child></Child>-->
</article>
</body>
<script>
    // var data = {
    //     counter:0
    // }
    // //全局注册
    // Vue.component('my-component',{
    //     template:`<button @click="counter++">{{counter}}</button>`,
    //     data(){
    //         return {counter:0}
    //     }
    // })
    // // 局部嵌套
    // var Child = {
    //     template:`<h1>this part component</h1>`
    // }
    // var app = new Vue({
    //     el:'#app7-1',
    //     components:{
    //         Child
    //     }
    // })

</script>
</html>